<template>
	<view class="content">
        <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper>
		<uv-vtabs 
			:chain="chain"
			:list="list"
            keyName="title"
			:barItemBadgeStyle="{right:'20px',top:'12px'}"
            :barItemStyle="{fontSize:'32rpx'}"
            :current="value"
            :barItemActiveStyle="{color:'#2CC6A1',fontSize:'32rpx'}"
            :barItemActiveLineStyle="{background:'#2CC6A1'}"
			@change="change">
			<uv-vtabs-item>
                <block v-if="list2.length">
                    <view 
                        class="item justify-between align-center"
                        v-for="(item2,index2) in list2"
                        :key="index2" @click="toactMain(item2)">
                        <image :src="$domain.api+item2.img_url" mode="aspectFit"></image>
                        <view class="flex1">
                                <view class="item-title">
                                    <text class="text">{{item2.title}}</text>
                                </view>
                                <view class="item-content">
                                    <text class="text">{{item2.activity_time}}</text>
                                </view>
                                <view class="item-content clamp2">
                                    <text class="text">{{item2.desc}}</text>
                                </view>
                                <view class="item-price">
                                   ￥<text>{{item2.pay_fee}}</text>元/起
                                </view>
                        </view>
                    </view>
                </block>   
                <uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>

			</uv-vtabs-item>
		</uv-vtabs>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[  ],
                list2:[],
                categoryId:"",
                
			}
		},
		
		onReady() {
			// 模拟接口请求数据
			uni.showLoading({
				title: '加载中'
			})
			
		},
        onLoad(opt) {
         let index = opt.index?opt.index:0
          this.getCate(index)  
        
        },
		methods: {
            async getCate(index){
               const {data,code}  =     await this.$api.CategoryList()
               uni.hideLoading()
               if(code==200){
                   this.list = data
                   this.categoryId =data[this.value].id
                    this.value = index
                    console.log(this.value)
                   this.getList()
               } 
            },
            async getList(){
              const {data,code}  =     await this.$api.activityList({categoryId:this.categoryId })
              console.log(code,data)
              if(code==200){
                  this.list2 = data
              }
            },
			change(index) {
               this.value = index;
               this.categoryId =this.list[index].id
               this.getList()
			},
            toactMain(item){
                uni.navigateTo({
                    url:'/pages/actMain/index?id='+item.id
                })
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 22rpx 20rpx 22rpx 32rpx;
        image{
            width: 124rpx;
            height: 164rpx;
            border-radius: 12rpx ;
            margin-right: 20rpx;
        }
		&-title {
			.text {
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 48rpx;
				
			}
		}
		&-content {
			
			.text {
				line-height: 36rpx;
				font-size: 24rpx;
				color: #9F9F9F;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
        &-price {
        	font-size: 24rpx;
        	color: #FF9012;
        	text {
        		font-size: 36rpx;
                line-height: 36rpx;
        	}
        }
	}
	.gap {
		padding: 0 30rpx;
	}
    .swiper{
        image{
            width:100%;
            height:300rpx;
        }
       
        
    }
</style>